<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html提取</title>

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/bootstrap.min.css}">

    <script src="https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js"></script>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>

</head>

<body>

    <div class="main">
        <h2 style="margin-bottom: 30px">提取公众号文章</h2>

        <div>

            <form class="form-horizontal">
                <div class="form-group" >
                    <label for="input1" class="col-sm-2 control-label">文章地址:</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control" id="input1" placeholder="请输入文章地址">
                    </div>
                </div>
            </form>

            <button id="getContentBtn" type="button" class="btn btn-primary" style="margin-right: 30px">获取文章内容</button>
            <button id="showHtml" type="button" class="btn btn-primary" style="margin-right: 30px">源码切换</button>
            <button id="clear" type="button" class="btn btn-primary">清空</button>

            <p/>
        </div>

        <textarea cols="80" id="editor1" name="editor1" rows="100" data-sample-short>

        </textarea>

    </div>


    <script>
        var editor1 = CKEDITOR.replace('editor1', {
            extraAllowedContent: 'div',
            height: 460
        });
        editor1.on('instanceReady', function() {
            // Output self-closing tags the HTML4 way, like <br>.
            this.dataProcessor.writer.selfClosingEnd = '>';

            // Use line breaks for block elements, tables, and lists.
            var dtd = CKEDITOR.dtd;
            for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
                this.dataProcessor.writer.setRules(e, {
                    indent: true,
                    breakBeforeOpen: true,
                    breakAfterOpen: true,
                    breakBeforeClose: true,
                    breakAfterClose: true
                });
            }
            $("a.cke_button_on").css("display:none");
            // Start in source mode.
            this.setMode('source');
        });
        $().ready(function(){
            //$("#cke_33").css("display:none");

            //setTimeout(function () {
            //debugger;
            //$("#cke_toolgroup").css("display:none");
            //}, 1000);
            $("#showHtml").click(function(){
                $("#cke_33").click();
            });

            $("#clear").click(function () {
                $("#input1").val(null);
                $("#editor1").val(null);
                $("#cke_1_contents textarea").val(null);
            });

            $("#getContentBtn").click(function(){
                var srcUrl = $("#input1").val();

                $.ajax({
                    type:'post',
                    url: '/tools/html/extract/extract',
                    data: srcUrl,
                    //crossDomain: true,
                    contentType: "application/json",
                    dataType:"json",
                    error : function() {
                        alert('smx失败 ');
                    },
                    success: function(result){
                        // alert("sucess");
                        console.log(result);
                        $("#cke_1_contents textarea").val(result.data);
                        $("#cke_33").click();
                    }
                });
            });
        });

    </script>
</body>

</html>

<style>
    a.cke_button_on {
        background: #fff;
        border: 1px #bcbcbc solid;
        padding: 3px 5px;
        display: none;!important;
    }
    .main{
        text-align: center; /*让div内部文字居中*/
        background-color: #fff;
        border-radius: 20px;
        width: 800px;
        height: 850px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>
